<template>
	<div>
		<div class="header">
			<div class="header_left">
				<img src="../../styles/xian.png" alt="">
				<el-breadcrumb separator="/" class="dao">
					<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{path: '/Platform_upload'}">文章管理</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/Platform_upload' }">文章列表-平台上传</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/User_upload' }">文章列表-用户上传</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="header_right">
				<span>管理员：</span>
				<span>李帅</span>
				<span>退出</span>
				<span>修改密码</span>
			</div>
		</div>
		<div class="header_bottom">
			<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" color="#67C23A">
				{{tag.name}}
			</el-tag>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tags: [
					{
						name: '首页',
						type: ''
					},
					{
						name: '文章管理',
						type: ''
					},
				]
			}
		},
		components: {

		}
	}
</script>

<style lang="less" scoped>
	.header {
		width: 100%;
		overflow: hidden;
		padding-bottom: 10px;
		border-bottom: 1px solid #F2F2F2;

		.header_left {
			float: left;
			position: relative;
			width: 50%;

			img {
				position: absolute;
				top: 10%;
				left: 0;
			}

			.dao {
				display: inline-block;
				margin: 10px 0 0 50px;
				font-size: 16px;
			}
		}

		.header_right {
			float: right;
			margin-top: 10px;

			span {
				font-size: 18px;
				color: #444;
				margin: 10px 0 0 10px;
				cursor: pointer;
			}
		}
	}

	.header_bottom {
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 3px solid #F2F2F2;

		.el-tag {
			color: #EEE;
		}
	}
</style>
